<template>
  <div class="ai-recommend-page">
    <div class="page-header">
      <h3>智能推荐</h3>
      <el-button type="primary" @click="refreshRecommendations" :loading="loading">
        刷新推荐
      </el-button>
    </div>

    <el-tabs v-model="activeTab">
      <!-- 业务推荐 -->
      <el-tab-pane label="业务推荐" name="business">
        <div class="recommend-grid">
          <el-card 
            v-for="(item, index) in businessRecommendations"
            :key="index"
            class="recommend-card"
            :class="item.type"
          >
            <template #header>
              <div class="card-header">
                <el-icon class="card-icon"><component :is="item.icon" /></el-icon>
                <span>{{ item.title }}</span>
                <el-tag :type="item.priority === 'high' ? 'danger' : 'info'" size="small">
                  {{ item.priority === 'high' ? '高优先级' : '普通' }}
                </el-tag>
              </div>
            </template>
            
            <div class="card-content">
              <div class="recommend-text">{{ item.text }}</div>
              <div class="recommend-data" v-if="item.data">
                <div v-for="(data, idx) in item.data" :key="idx" class="data-item">
                  <span class="data-label">{{ data.label }}：</span>
                  <span class="data-value">{{ data.value }}</span>
                </div>
              </div>
              <div class="card-actions">
                <el-button type="primary" size="small" @click="handleAction(item.action)">
                  查看详情
                </el-button>
                <el-button size="small" @click="dismissRecommendation(item.id)">
                  忽略
                </el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>

      <!-- 优化建议 -->
      <el-tab-pane label="优化建议" name="optimization">
        <div class="optimization-list">
          <el-card 
            v-for="(item, index) in optimizationSuggestions"
            :key="index"
            class="optimization-card"
          >
            <div class="optimization-header">
              <div class="optimization-title">
                <el-icon class="optimization-icon"><component :is="item.icon" /></el-icon>
                <span>{{ item.title }}</span>
              </div>
              <el-tag :type="item.level === 'high' ? 'danger' : item.level === 'medium' ? 'warning' : 'info'">
                {{ item.level === 'high' ? '重要' : item.level === 'medium' ? '一般' : '提示' }}
              </el-tag>
            </div>
            <div class="optimization-content">
              <p>{{ item.description }}</p>
              <div class="optimization-benefit" v-if="item.benefit">
                <strong>预期收益：</strong>{{ item.benefit }}
              </div>
              <div class="optimization-actions">
                <el-button type="primary" size="small" @click="applyOptimization(item)">
                  应用优化
                </el-button>
                <el-button size="small" @click="viewDetails(item)">
                  查看详情
                </el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>

      <!-- 个性化推荐 -->
      <el-tab-pane label="个性化推荐" name="personalized">
        <PersonalizedRecommendations />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Warning, TrendCharts, ShoppingCart, Money,
  Document, User, Setting, Bell
} from '@element-plus/icons-vue'
import PersonalizedRecommendations from './components/PersonalizedRecommendations.vue'

const activeTab = ref('business')
const loading = ref(false)

const businessRecommendations = ref([])
const optimizationSuggestions = ref([])

// 加载业务推荐
const loadBusinessRecommendations = () => {
  businessRecommendations.value = [
    {
      id: 1,
      type: 'warning',
      title: '库存预警',
      icon: Warning,
      text: '检测到5种商品库存低于安全库存，建议及时补货',
      priority: 'high',
      data: [
        { label: '商品数量', value: '5种' },
        { label: '预计缺货时间', value: '3-5天' }
      ],
      action: { type: 'inventory', id: 'replenish' }
    },
    {
      id: 2,
      type: 'info',
      title: '销售趋势',
      icon: TrendCharts,
      text: '本月销售较上月增长15%，建议关注热门商品',
      priority: 'normal',
      data: [
        { label: '增长率', value: '+15%' },
        { label: '热门商品', value: '3种' }
      ],
      action: { type: 'sales', id: 'trend' }
    },
    {
      id: 3,
      type: 'success',
      title: '财务提醒',
      icon: Money,
      text: '本月有3笔应收账款即将到期，请注意跟进',
      priority: 'high',
      data: [
        { label: '到期金额', value: '¥50,000' },
        { label: '笔数', value: '3笔' }
      ],
      action: { type: 'finance', id: 'receivable' }
    }
  ]
}

// 加载优化建议
const loadOptimizationSuggestions = () => {
  optimizationSuggestions.value = [
    {
      id: 1,
      title: '库存优化',
      icon: ShoppingCart,
      description: '建议优化库存结构，减少滞销商品库存，提高周转率',
      level: 'high',
      benefit: '预计可减少库存成本20%，提升资金周转效率',
      actions: ['清理滞销库存', '调整采购计划']
    },
    {
      id: 2,
      title: '流程优化',
      icon: Document,
      description: '销售订单审批流程可以简化，减少审批环节',
      level: 'medium',
      benefit: '预计可缩短订单处理时间30%',
      actions: ['简化审批流程', '自动化处理']
    },
    {
      id: 3,
      title: '用户权限优化',
      icon: User,
      description: '部分用户权限配置不合理，建议重新分配',
      level: 'low',
      benefit: '提升系统安全性',
      actions: ['权限审核', '权限优化']
    }
  ]
}

const refreshRecommendations = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    loadBusinessRecommendations()
    loadOptimizationSuggestions()
    ElMessage.success('推荐已刷新')
  } catch (error) {
    ElMessage.error('刷新失败')
  } finally {
    loading.value = false
  }
}

const handleAction = (action) => {
  ElMessage.info(`执行操作：${action.type} - ${action.id}`)
  // 这里可以导航到对应页面
}

const dismissRecommendation = (id) => {
  businessRecommendations.value = businessRecommendations.value.filter(r => r.id !== id)
  ElMessage.success('已忽略该推荐')
}

const applyOptimization = (item) => {
  ElMessage.success(`已应用优化：${item.title}`)
}

const viewDetails = (item) => {
  ElMessage.info(`查看详情：${item.title}`)
}

onMounted(() => {
  loadBusinessRecommendations()
  loadOptimizationSuggestions()
})
</script>

<style scoped lang="scss">
.ai-recommend-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h3 {
    margin: 0;
    color: #303133;
  }
}

.recommend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.recommend-card {
  transition: transform 0.2s;

  &:hover {
    transform: translateY(-4px);
  }

  &.warning {
    border-left: 4px solid #E6A23C;
  }

  &.info {
    border-left: 4px solid #409EFF;
  }

  &.success {
    border-left: 4px solid #67C23A;
  }
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;

  .card-icon {
    font-size: 18px;
    color: #409EFF;
  }
}

.card-content {
  .recommend-text {
    margin-bottom: 12px;
    color: #606266;
    line-height: 1.6;
  }

  .recommend-data {
    margin-bottom: 16px;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 6px;
  }

  .data-item {
    margin: 4px 0;
    font-size: 13px;

    .data-label {
      color: #909399;
    }

    .data-value {
      color: #303133;
      font-weight: 500;
    }
  }

  .card-actions {
    display: flex;
    gap: 8px;
  }
}

.optimization-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.optimization-card {
  .optimization-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .optimization-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
  }

  .optimization-icon {
    font-size: 18px;
    color: #409EFF;
  }

  .optimization-content {
    p {
      margin: 0 0 12px;
      color: #606266;
      line-height: 1.6;
    }

    .optimization-benefit {
      margin-bottom: 12px;
      padding: 8px 12px;
      background: #f0f9ff;
      border-radius: 6px;
      font-size: 13px;
      color: #303133;

      strong {
        color: #409EFF;
      }
    }

    .optimization-actions {
      display: flex;
      gap: 8px;
    }
  }
}
</style>
